<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <div style="padding: 10px">
            <a-alert :message="i18n('tip','应用的创建者或第一次导入应用的人，默认会成为该应用的管理员')" type="info" show-icon />
            <div class="system-header">
                <div class="system-member"><my-icon type="iconpeople_fill"></my-icon></div>
                <span style="font-weight: bold">&nbsp;{{i18n('adminAuth','管理员授权')}}</span>
                <div class="system-user">
                    <span style="margin-right: 20px">{{i18n('selected','已选择')}}<a>{{manageUsers.length}}</a>{{i18n('users','个用户')}}，<a>{{manageGroups.length}}</a>{{i18n('userGroups','个用户组')}}</span>
                    <span @click="clearSelected('manage')" style="margin-right: 20px;color: #ff1a1a;cursor: pointer;"><my-icon type="iconqingchu"></my-icon>{{i18n('clear','清空')}}</span>
                    <a-button style="margin-right: 20px" icon="usergroup-add" @click="clickGroupAdd(manageGroups,'2')">{{i18n('userGroup','用户组')}}</a-button>
                    <a-button icon="user-add"  @click="clickUserAdd(manageUsers,'2')">{{i18n('user','用户')}}</a-button>
                </div>
            </div>
            <div class="system-center">
                <div class="system-center-user" v-if="manageUsers.length>0">
                    <div class="system-text" :title="i18n('user','用户')">
                        <a-tooltip>
                            <template slot="title">
                                <span>{{i18n('user','用户')}}</span>
                            </template>
                            {{i18n('user','用户')}}
                        </a-tooltip>
                    </div>
                    <div style="flex: 1">
                        <ul class="system-ul">
                            <li class="system-li" :key="item.userOrGroupId" v-for="(item,index) in manageUsers">
                                <span><my-icon style="margin-right: 5px" type="iconVue3_user"></my-icon><span style="font-size: 14px;">{{ item.userOrGroupName }}</span></span>
                                <i  class="iconfont iconcuo system-li-iconcuo" @click="close(item,manageUsers)" ></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="system-center-user" v-if="manageGroups.length>0">
                    <div class="system-text" :title="i18n('userGroup','用户组')">
                        <a-tooltip>
                            <template slot="title">
                                <span>{{i18n('userGroup','用户组')}}</span>
                            </template>
                            {{i18n('userGroup','用户组')}}
                        </a-tooltip>
                    </div>
                    <div style="flex: 1">
                        <ul class="system-ul">
                            <li class="system-li" :key="item.userOrGroupId" v-for="(item,index) in manageGroups">
                                <span><my-icon style="margin-right: 5px" type="icona-Vue3_usergroup"></my-icon><span style="font-size: 14px;">{{ item.userOrGroupName }}</span></span>
                                <i  class="iconfont iconcuo system-li-iconcuo" @click="close(item,manageGroups)"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <a-empty v-if="manageGroups.length==0 && manageUsers.length==0" />
            </div>
            <div class="system-header">
                <div class="system-member"><my-icon type="iconpeople_fill"></my-icon></div>
                <span style="font-weight: bold">&nbsp;{{i18n('developAuth','开发者授权')}}</span>
                <div class="system-user">
                    <span style="margin-right: 20px">{{i18n('selected','已选择')}}<a>{{developUsers.length}}</a>{{i18n('users','个用户')}}，<a>{{developGroups.length}}</a>{{i18n('userGroups','个用户组')}}</span>
                    <span @click="clearSelected('develop')" style="margin-right: 20px;color: #ff1a1a;cursor: pointer;"><my-icon type="iconqingchu"></my-icon>{{i18n('clear','清空')}}</span>
                    <a-button style="margin-right: 20px" icon="usergroup-add" @click="clickGroupAdd(developGroups,'1')">{{i18n('userGroup','用户组')}}</a-button>
                    <a-button icon="user-add"  @click="clickUserAdd(developUsers,'1')">{{i18n('user','用户')}}</a-button>
                </div>
            </div>
            <div class="system-center">
                <div class="system-center-user" v-if="developUsers.length>0">
                    <div class="system-text" :title="i18n('user','用户')">
                        <a-tooltip>
                            <template slot="title">
                                <span>{{i18n('user','用户')}}</span>
                            </template>
                            {{i18n('user','用户')}}
                        </a-tooltip>
                    </div>
                    <div style="flex: 1">
                        <ul class="system-ul">
                            <li class="system-li" v-for="(item,index) in developUsers">
                                <span><my-icon style="margin-right: 5px" type="iconVue3_user"></my-icon><span style="font-size: 14px;">{{ item.userOrGroupName }}</span></span>
                                <i  class="iconfont iconcuo system-li-iconcuo" @click="close(item,developUsers)" ></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="system-center-user" v-if="developGroups.length>0">
                    <div class="system-text" :title="i18n('userGroup','用户组')">
                        <a-tooltip>
                            <template slot="title">
                                <span>{{i18n('userGroup','用户组')}}</span>
                            </template>
                            {{i18n('userGroup','用户组')}}
                        </a-tooltip>
                    </div>
                    <div style="flex: 1">
                        <ul class="system-ul">
                            <li class="system-li" v-for="(item,index) in developGroups">
                                <span><my-icon style="margin-right: 5px" type="icona-Vue3_usergroup"></my-icon><span style="font-size: 14px;">{{ item.userOrGroupName }}</span></span>
                                <i  class="iconfont iconcuo system-li-iconcuo" @click="close(item,developGroups)"></i>
                            </li>
                        </ul>
                    </div>
                </div>
                <a-empty v-if="developGroups.length==0 && developUsers.length==0" />
            </div>
        </div>
    </rx-dialog>
</template>

<script>
import {RxLayout, RxDialog, Util, RxSelect, Dialog} from "@lowcode/jpaas-common-lib";
import SysAppManagerApi from "@/api/system/core/sysAppManager";
export default {
    name: "system-app-manager",
    components: {
        RxDialog,
        RxLayout,
    },
    props: {
        layerid: String,
        lydata: Object,
        destroy: Function,
        curApp: Object,
        callback: {
            type: Function
        }
    },
    data() {
        return {
            appIcon:{},
            manageGroups: [],
            manageUsers: [],
            developGroups: [],
            developUsers: [],
        }
    },
    mounted() {
        //当前应用图标
        if(this.curApp.icon){
            this.appIcon=JSON.parse(this.curApp.icon);
        }
        //加载之前保存的授权信息
        let self=this;
        SysAppManagerApi.getByAppId(this.curApp.appId).then(res => {
            let initData=res.data;
            self.initData(initData);
        });
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysAppManager",key);
        },
        //初始化原来的授权信息
        initData(initdata){
            if(!initdata){
                return ;
            }
            //将授权信息分类
            for (let  row of initdata) {
                //开发者
                if(row.authType==1){
                    if(row.isGroup==0){
                        this.developUsers.push(row);
                    }else {
                        this.developGroups.push(row);
                    }
                }else{ //管理员
                    if(row.isGroup==0){
                        this.manageUsers.push(row);
                    }else {
                        this.manageGroups.push(row);
                    }
                }
            }
        },
        //选择用户组
        clickGroupAdd(groups,authType){
            var self_=this;
            var conf = {curVm: this, data: {single: false,showDimId:true}, widthHeight: ['900px', '700px']};
            Dialog.openGroupDialog(conf, function (self, data) {
                if(!data){
                    return ;
                }
                for (var i = 0; i < data.length; i++) {
                    let group = data[i];
                    let row={isGroup:1,authType:authType,appId:self.curApp.appId};
                    row.userOrGroupId=group.groupId;
                    row.userOrGroupName=group.name;
                    if(!self_.checkLeachData(groups,"userOrGroupId",authType,row.userOrGroupId)){
                        groups.push(row);
                    }
                }
            })
        },
        checkLeachData(dataList,key,authType,keyval){
            var obj = dataList.find((item) => (keyval == item[key] && authType==item.authType));
            if(obj){
                return true;
            }
            return false;
        },
        //选择用户
        clickUserAdd(users,authType){
            var self_=this;
            var conf = {curVm: this, data: {single: false}, widthHeight: ['1024px', '600px']};
            Dialog.openUserDialog(conf, function (self, data) {
                if(!data){
                    return ;
                }
                for (var i = 0; i < data.length; i++) {
                    let user = data[i];
                    let row={isGroup:0,authType:authType,appId:self.curApp.appId};
                    row.userOrGroupId=user.userId;
                    row.userOrGroupName=user.fullName;
                    if(!self_.checkLeachData(users,"userOrGroupId",authType,row.userOrGroupId)){
                        users.push(row);
                    }
                }
            })
        },
        //清空已选择
        clearSelected(array){
            if(array=='manage'){
                this.manageUsers.splice(0,this.manageUsers.length);
                this.manageGroups.splice(0,this.manageGroups.length);
            }else if(array=='develop'){
                this.developUsers.splice(0,this.developUsers.length);
                this.developGroups.splice(0,this.developGroups.length);
            }
        },
        //确定按钮事件
        handleSubmit(vm) {
            vm.loading =false ;
            let rows=this.manageUsers.concat(this.manageGroups,this.developUsers,this.developGroups);
            var params={appId:this.curApp.appId,rows:rows};
            SysAppManagerApi.batchSave(params);
            Util.closeWindow(this,"ok")
        },
        //取消按钮事件
        cancel() {
            Util.closeWindow(this, "cancel");
        },
        //删除某个选中值
        close(item, array) {
            array.splice(array.indexOf(item), 1);
        },
    }
}
</script>

<style scoped>
.system-header{
    display: flex;
    margin-top: 20px;
    align-items: center;
}
.system-member{
    width: 24px;
    height: 24px;
    background-color: #4285f4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 8px;
}
.system-user{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.system-center{
    background-color: #ffffff;
    border-radius: 4px;
    border: dashed 1px #e8e8e8;
    margin-top: 10px;
    padding: 20px 10px 0px 10px;
    min-height: 170px;
}
.system-center-user{
    display: flex;
    margin-bottom: 10px;
}
.system-ul{
    display: flex;
    flex-direction: row;
    margin: 0px;
    flex-wrap: wrap;
}
.system-li{
    height: 24px;
    background-color: #f5f7fa;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0px 10px 10px 0px;
}
.system-li-iconcuo:hover{
    color: red;
    cursor: pointer;
}
.system-text{
    margin-right: 10px;
    width: 88px;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    padding-right:8px ;
}
.system-text:after{
    content: ':';
    position: absolute;
    right: 0;
    top: 0;
    font-size: 14px;
}
</style>